// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex';

// 使用Vuex
Vue.use(Vuex);

// vuex模块化分类：
// 1.将不同的功能拆分为n个模块对象
const countOptions = {
    // 2.给模块开启命名空间
    namespaced:true,
    state:{
        num:0,
        school:'尚硅谷',
        subject:'前端',
    },
    actions:{
        oddAdd(context,val){
            if(context.state.num %2) context.commit('ADD',val);
        },
        addWait(context,val){
            setTimeout(() => {
                context.commit('ADD',val);
            }, 500);
        }
    },
    mutations:{
        ADD(state,val){
            state.num += val;
        },
        CUT(state,val){
            state.num -= val;
        },
    },
    getters:{
        bigNum(state,getters){
            return state.num * 10
        }
    }
}

const personOptions = {
    namespaced:true,
    state:{
        persons:[
            {id:'1',name:'张三'}
        ]
    },
    actions:{

    },
    mutations:{
        ADD_PERSON(state,val){
            console.log("Mutations中的ADD_PERSON方法触发了");
            state.persons.unshift(val);
        }
    },
    getters:{
        
    }
}


// 创建并暴露Store
export default new Vuex.Store({
    // 3.将模块写入modules中
    modules:{
        // 4.key value中，key是对组件的显示名，组件通过key来访问这些对应的store
        // value则是定义时的模块对象
        // ps:5在组件Count组件中
        countAbout:countOptions,
        personAbout:personOptions
    }
})